<template>
  <div class="auth-container">
    <!-- 背景装饰 -->
    <div class="auth-background">
      <div class="bg-decoration"></div>
    </div>

    <!-- 忘记密码卡片 -->
    <div class="auth-card">
      <!-- Logo 和标题区域 -->
      <div class="auth-header">
        <div class="logo-section">
          <!-- 小橘 Logo -->
          <div class="logo">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <circle cx="20" cy="20" r="18" fill="var(--orange-primary)" />
              <circle cx="15" cy="16" r="2.5" fill="white" />
              <circle cx="25" cy="16" r="2.5" fill="white" />
              <path d="M13 25 Q20 30 27 25" stroke="white" stroke-width="2" stroke-linecap="round" />
            </svg>
          </div>
          <h1 class="platform-title">找回密码</h1>
        </div>
        <p class="platform-subtitle">输入您的邮箱地址，我们将发送重置链接</p>
      </div>

      <!-- 忘记密码表单 -->
      <el-form ref="forgetFormRef" :model="forgetForm" :rules="forgetRules" class="auth-form"
        @submit.prevent="handleForgetPassword">
        <!-- 邮箱输入框 -->
        <el-form-item prop="email" class="form-item">
          <el-input v-model="forgetForm.email" type="email" placeholder="请输入您的邮箱地址" size="large" class="auth-input"
            :prefix-icon="Message" clearable />
        </el-form-item>

        <!-- 发送重置链接按钮 -->
        <el-form-item class="form-item">
          <el-button type="primary" size="large" class="auth-button" :loading="isLoading" @click="handleForgetPassword"
            native-type="submit">
            {{ isLoading ? '发送中...' : '发送重置链接' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 返回登录链接 -->
      <div class="auth-footer">
        <span class="footer-text">想起密码了？</span>
        <el-link type="primary" :underline="false" class="login-link" @click="goToLogin">
          返回登录
        </el-link>
      </div>
    </div>

    <!-- 页脚版权信息 -->
    <div class="copyright">
      <p>Powered by WISE-IoT</p>
      <el-link type="info" :underline="false" class="language-switch">
        简体中文 ▼
      </el-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Message } from '@element-plus/icons-vue'
import type { ForgetPasswordForm } from './types'

// 路由实例
const router = useRouter()

// 表单引用
const forgetFormRef = ref<FormInstance>()

// 响应式数据
const isLoading = ref(false)

// 忘记密码表单数据
const forgetForm = reactive<ForgetPasswordForm>({
  email: ''
})

// 表单验证规则
const forgetRules: FormRules<ForgetPasswordForm> = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

/**
 * 处理忘记密码提交
 */
const handleForgetPassword = async (): Promise<void> => {
  if (!forgetFormRef.value) return

  try {
    // 表单验证
    await forgetFormRef.value.validate()

    // 开始加载状态
    isLoading.value = true

    // 模拟发送重置邮件API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 这里应该调用实际的忘记密码API
    console.log('忘记密码请求:', {
      email: forgetForm.email
    })

    // 发送成功提示
    ElMessage.success('重置链接已发送到您的邮箱，请查收')

    // 清空表单
    forgetForm.email = ''

  } catch (error) {
    console.error('发送重置链接失败:', error)
    ElMessage.error('发送失败，请稍后重试')
  } finally {
    // 结束加载状态
    isLoading.value = false
  }
}

/**
 * 跳转到登录页面
 */
const goToLogin = (): void => {
  router.push('/login')
}
</script>

<style scoped>
/* 使用与登录页面相同的样式 */
@import url('@/assets/styles/auth/auth-styles.css');

/* 忘记密码页面特有样式 */

.platform-subtitle {
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}
</style>
